<template>
  <div class="area">
    <div class="list">
      <div>
        <h2 class="choseh">分类选择</h2>
        <el-cascader
          placeholder="推荐歌单"
          class="chosee"
          :options="options"
          :show-all-levels="false"
          @change="choseList"
        ></el-cascader>
      </div>

      <el-divider class="hrArea"><i class="el-icon-headset"></i></el-divider>
      <!-- 初始化歌单列表 -->
      <div v-if="!showSearchList">
        <el-row class="bodyStyle">
          <el-col
            :span="24"
            class="cardStyle"
            v-for="item in contentList"
            :key="item.id"
            @click.native="goToSearchLists(item)"
          >
            <el-card
              class="imageStyle"
              shadow="hover"
              :body-style="{ padding: '0px' }"
            >
              <!-- 展示图片和姓名 -->
              <img class="imgOne" :src="item.coverImgUrl" />
              <div class="textStyle">{{ item.name }}</div>
              <!-- 鼠标悬浮样式 -->
              <div class="top">
                <img class="imgTwo" src="../assets/play.png" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 搜索结果歌单列表 -->
      <div v-if="showSearchList">
        <el-row class="bodyStyle">
          <el-col
            :span="24"
            class="cardStyle"
            v-for="item in searchList"
            :key="item.id"
            @click.native="goToSearchLists(item)"
          >
            <el-card
              class="imageStyle"
              shadow="hover"
              :body-style="{ padding: '0px' }"
            >
              <!-- 展示图片和姓名 -->
              <img class="imgOne" :src="item.coverImgUrl" />
              <div class="textStyle">{{ item.name }}</div>
              <!-- 鼠标悬浮样式 -->
              <div class="top">
                <img class="imgTwo" src="../assets/play.png" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "SongList",
  data() {
    return {
      showSearchList: false,
      contentList: [],
      searchList: [],
      options: [
        {
          value: 0,
          label: "语种",
          children: [{}],
        },
        {
          value: 1,
          label: "风格",
          children: [{}],
        },
        {
          value: 2,
          label: "场景",
          children: [{}],
        },
        {
          value: 3,
          label: "情感",
          children: [{}],
        },
        {
          value: 4,
          label: "主题",
          children: [{}],
        },
      ],
    };
  },
  created() {
    this.getListMsg();
    this.getHotList();
  },
  methods: {
    //获取歌单分类
    getListMsg() {
      axios
        .get("http://localhost:3000/playlist/catlist") //limit 对多为30
        .then((response) => {
          console.log(response);
          //语种
          let a = response.data.sub.filter((item) => {
            return item.category === 0;
          });
          let amsg = a.map((item) => ({
            value: item.name,
            label: item.name,
          }));
          this.options[0].children = amsg;
          //风格
          let b = response.data.sub.filter((item) => {
            return item.category === 1;
          });
          let bmsg = b.map((item) => ({
            value: item.name,
            label: item.name,
          }));
          this.options[1].children = bmsg;
          //场景
          let c = response.data.sub.filter((item) => {
            return item.category === 2;
          });
          let cmsg = c.map((item) => ({
            value: item.name,
            label: item.name,
          }));
          this.options[2].children = cmsg;
          //情感
          let d = response.data.sub.filter((item) => {
            return item.category === 3;
          });
          let dmsg = d.map((item) => ({
            value: item.name,
            label: item.name,
          }));
          this.options[3].children = dmsg;
          //主题
          let e = response.data.sub.filter((item) => {
            return item.category === 4;
          });
          let emsg = e.map((item) => ({
            value: item.name,
            label: item.name,
          }));
          this.options[4].children = emsg;
        })
        .catch((error) => {
          console.warn(error);
        });
    },
    //推荐歌单
    getHotList() {
      axios
        .get("http://localhost:3000/top/playlist/highquality", {
          params: {
            limit: 50,
          },
        })
        .then((response) => {
          this.contentList = response.data.playlists;
        })
        .catch((error) => {
          console.warn(error);
        });
    },
    //搜索分类歌单
    choseList(val) {
      console.log("我被点击了", val[1]);
      axios
        .get("http://localhost:3000/top/playlist", {
          params: {
            cat: val[1],
            limit: 200,
          },
        })
        .then((response) => {
          this.searchList = response.data.playlists;
        })
        .catch((error) => {
          console.warn(error);
        });
      this.showSearchList = true;
    },
    //转向详情歌单页面
    goToSearchLists(item) {
      this.$router
        .push({
          name: "alllists",
          query: {
            list: item,
          },
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style scoped>
.area {
  margin-top: 20px;
  margin-bottom: 20px;
  background: #fff;
}
.list {
  width: 985px;
  border: 3px solid rgba(243, 243, 243, 1);
  margin: auto;
}
.choseh {
  float: left;
  margin-left: 20px;
}
.chosee {
  float: left;
  margin-left: 10px;
  margin-top: 15px;
}
.hrArea {
  height: 2px;
  width: 940px;
  margin-top: 65px;
  margin-left: 21px;
  border: 1px solid #1d953f;
  background: #1d953f;
}

.bodyStyle {
  width: 920px;
  height: 780px;
  margin-top: 20px;
  margin-bottom: 40px;
  margin-left: 35px;
  box-shadow: 4px 4px 5px 3px #999;
  overflow: scroll;
}
.cardStyle {
  width: 140px;
  margin: 20px;
  box-shadow: 2px 2px 3px 3px #999;
}
.imageStyle {
  height: 140px;
  width: 100%;
}
.textStyle {
  font-size: 6px;
  line-height: 20px;
  overflow: hidden;
}
.imgOne {
  height: 120px;
  width: 100%;
  display: block;
}
.imgTwo {
  height: 90px;
  width: 90px;
  margin-top: 220px;
  margin-left: 25px;
}
/* 写好遮罩层样式,并且让它先不显示 */
.top {
  width: 250px;
  height: 400px;
  background-color: black;
  margin-top: -360px;
  opacity: 0;
}
/* 鼠标hover,显示遮罩,设置过渡时间 */
.top:hover {
  opacity: 0.4;
  transition: opacity 0.5s;
}
</style>